<script setup>
import { ref } from 'vue'
import {
  User,
  House,
  Goods,
  ShoppingTrolley,
  Document,
  Menu,
  Notebook,
  CirclePlus
} from '@element-plus/icons-vue'

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}

</script>

<template>
  <!-- 导航栏 -->
  <el-menu
      default-active="/home/mall/work"
      router="true"
      class="el-menu-horizontal-demo"
      :collapse="false"
      @open="handleOpen"
      @close="handleClose"
  >
    <el-menu-item index="/home/mall/work">
      <el-icon><Menu /></el-icon>
      <template #title>工作台</template>
    </el-menu-item>
    <el-menu-item index="/home/mall/canmall">
      <el-icon><House /></el-icon>
      <template #title>菜单管理</template>
    </el-menu-item>
    <el-menu-item index="/home/mall/order">
      <el-icon><Goods /></el-icon>
      <template #title>订单</template>
    </el-menu-item>
    <el-sub-menu>
      <template #title>
        <el-icon style="color: white"><Notebook /></el-icon>
        <span style="font-size: 20px;color: white">公告管理</span>
      </template>
      <el-menu-item index="/home/mall/notice" style="background-color: rgb(68, 68, 68);">
        <el-icon style="color: white"><Document /></el-icon>
        <template #title>查看公告</template>
      </el-menu-item>
      <el-menu-item index="/home/mall/anotice" style="background-color: rgb(68, 68, 68);">
        <el-icon style="color: white"><CirclePlus /></el-icon>
        <template #title>添加公告</template>
      </el-menu-item>
    </el-sub-menu>
    <el-menu-item index="/home/mall/my">
      <el-icon><User /></el-icon>
      <template #title>我的</template>
    </el-menu-item>
  </el-menu>
</template>

<style scoped>
/* 设置所有菜单项的字体颜色为白色 */
.el-menu-item {
  font-size: 20px;  /* 字体大小 */
  margin-right: 0;  /* 菜单项之间的间距 */
  color: #fff;  /* 字体颜色 */
;
}
/*
!* 去除最后一个菜单项的右侧间距 *!
.el-menu-item:last-child {
  margin-right: 0;
}*/

/* 设置激活状态下菜单项的背景颜色为深蓝色 */
.el-menu-item.is-active {
  background-color: lightslategrey;  /* 激活状态下的背景颜色 */
  color: #fff;  /* 激活状态下的字体颜色保持白色 */

}

/* 设置悬浮状态下菜单项的背景颜色，如果需要 */
.el-menu-item:hover {
  background-color: lightslategrey;  /* 悬浮时的背景颜色 */
  color: #fff;  /* 悬浮时的字体颜色保持白色 */
}

/* 如果需要，覆盖禁用状态下的样式 */
.el-menu-item.is-disabled {
  color: rgba(255, 255, 255, 0.5);  /* 禁用状态下的字体颜色 */
}
</style>